<template>
  <q-layout>
    <q-page-container>
      <q-page class="flex bg-image flex-center">
        <q-card v-bind:style="$q.screen.lt.sm?{'width': '80%'}:{'width':'30%'}">
          <q-card-section>
            <q-avatar size="103px" class="absolute-center shadow-10">
              <img :src="logo">
            </q-avatar>
          </q-card-section>
          <q-card-section>
            <div class="text-center q-pt-lg">
              <div class="col text-h6 ellipsis">
                后台管理系统
              </div>
            </div>
          </q-card-section>
          <q-card-section>
            <q-form
              class="q-gutter-md"
              @submit="handleLogin"
            >
              <q-input
                outlined
                standout
                v-model="username"
                label="用户名/手机号"
                lazy-rules
                :rules="[ val => val && val.length > 0 || '用户名不能为空']"
                id="username"
              />

              <q-input
                type="password"
                outlined
                v-model="password"
                label="密码"
                lazy-rules
                :rules="[ val => val && val.length > 0 || '密码不能为空']"
                autocomplete="off"
                id="password"
              />

              <div class="text-center q-gutter-x-md">
                <q-btn label="重置" type="button" color="primary" @click="reset" class="q-px-md q-mb-sm"/>
                <q-btn label="登录" type="submit" color="primary" class="q-px-md q-mb-sm"/>
              </div>
            </q-form>
          </q-card-section>
        </q-card>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script>
import logo from 'src/assets/logo.png'
import routes from 'src/router/routes'

import {login, getMenu} from 'src/api/login'
import store from "src/store";
import Store from "src/store";
    export default {
        data() {
            return {
                username: '',
                password: '',
              logo: logo
            }
        },
        methods:{
          reset(){
            this.username = ''
            this.password = ''
          },
          handleLogin () {
            login(this.username,this.password).then(
              success=>{
                return getMenu();
              }
            ).then(
              success => {
                // this.$store.commit('SET_MENU',routes)
                // this.$router.$avueRouter.formatRoutes(routes, true);

                // this.$router.addRoutes(routes);
                // console.log(this.$router)
                this.$router.push("/home")

              }
            )
          }
        }
    }
</script>

<style scoped>

</style>

<style>

  .bg-image {
   background-image: linear-gradient(135deg, #7028e4 0%, #e5b2ca 100%);
  }
</style>
